<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>任务总结</div>
      </div>
    </header>
    <div class="main">

      <div class="box radius-m">
        <div class="main-box main-box-line">
          <div class="main-box-in">
            <div class="dw"><img src="../../assets/images/fz.png"/>{{dataObj.jc}}</div>
            <div class="date"><img src="../../assets/images/date.png"/>{{dataObj.commitDate}}</div>
            <div class="man"><img src="../../assets/images/name.png"/>{{dataObj.username}}</div>
          </div>
        </div>
        <div class="item">
          <div class="item-key">内容:</div>
          <div class="item-value">{{dataObj.commitContent}}</div>
        </div>
        <div class="item">
          <div class="item-key">附件:</div>
          <div class="item-value">
            <ul class="imgs_ul" v-show="img_list&&img_list.length>0">
              <li v-for="(item,index) of img_list" :key="index"><img :src="show_path+item.path"/></li>
            </ul>
            <div class="fj" v-for="(item,index) of fj_list" :key="index" @click="showFj(item)">{{item.remark}}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import "../../assets/js/zoom.js";
import utils from "../../assets/js/utils.js"
import terminal from "../../assets/js/terminal";
export default {
  name: "rwzjxq",
  data() {
    return {
      dataObj: {},
      show_path:null,
      id:null,
      img_list:[],
      fj_list:[]
    };
  },
  destroyed() {
    var _this = this;
    setTimeout( () => {
        try{
          _this.$zoom.showImagesFn.hideContainer();
        }catch(e){
          console.log(e.message);
        }
    })
  },
  methods: {
    back(){//返回
      this.$router.back()
    },
    getDateFormat(any_date,formatdate){//格式化日期
      return utils.dateFormat(any_date,formatdate);
    },
    checkFjType(info){
      var arr =  ['png','jpg','jpeg','bmp','gif','webp','psd','svg','tiff','txt','pdf','doc','docx','xls','xlsx','pptx'];
      var flag = false;
      if(info&&info.type){
        flag = arr.indexOf(info.type.toLowerCase())!==-1;
      }
      return flag;
    },
    showFj(item){//打开附件
      var path = this.show_path+item.path;
      var info = utils.getFileInfo(path);
      console.log(info);
      var flag = this.checkFjType(info);
      if(path&&info.name&&info.type&&info.fileExtension&&flag){
        try{
          var filename = new Date().getTime()+info.fileExtension;
          var waitingObj = plus.nativeUI.showWaiting("正在打开");
          var dtask = plus.downloader.createDownload(path, { filename: '_downloads/' + filename }, function(d, status){
            waitingObj.close();
            // 下载完成
            if(status == 200){
          			plus.runtime.openFile('_downloads/' + filename);
          		} else {
          			 console.log("Download failed: " + status);
          		}
          });
          dtask.addEventListener("statechanged", function (task, status) {
              if (!dtask) { return; }
              switch (task.state) {
                  case 1:
                      waitingObj.setTitle( "正在打开" );
                      break;
                  case 2:
                      waitingObj.setTitle( "正在打开" );
                      break;
                  case 3: // 已接收到数据
                      var progressVal = (task.downloadedSize / task.totalSize) * 100;
                      //psb1.progressbar({ progress: progressVal }).show();
                      //dstatus[0].innerHTML = task.downloadedSize + '/' + task.totalSize;
                      //hui.toast('下载进度：' + (task.downloadedSize + '/' + task.totalSize));
                      var progressStr = Number.parseInt(progressVal)+'% ';
                      console.log(progressStr);
                      waitingObj.setTitle(progressStr);
                      break;
                  case 4:
                      dtask = null;
                      waitingObj.setTitle( "0%" );
                      break;
              }
          });
          dtask.start();
        }catch(e){
          //TODO handle the exception
          console.log(e.message)
        }
      }
    },
    init() {//初始化
      var _this = this;
      _this.img_list = [];
      _this.fj_list = [];

      /*
      _this.img_list = [{}];
      _this.fj_list = [
        {path:'/Content/TaskFile/2020-12-09/88f5f600-f345-4493-a4c8-6c53804b5f091607508407387.xlsx',remark:'更新表12.8.xlsx'},
        {path:'/Content/TaskFile/2020-12-09/88f5f600-f345-4493-a4c8-6c53804b5f091607508407387.xlsx',remark:'更新表12.8.xlsx'},
        {path:'/Content/TaskFile/2020-12-09/88f5f600-f345-4493-a4c8-6c53804b5f091607508407387.xlsx',remark:'更新表12.8.xlsx'}
      ];
      return;
      */

      var params = {
        commitId:_this.id
      };
      _this.axios.get(_this.$global_msg.Url.host + "/taskAssign/selectBanliDetail",{
        params:params
      }).then(function (data) {
        console.log('viewsTasks:',data);
        if(data&&data.data){
          if(data.data.code==200){
            _this.dataObj = data.data.rows;
            _this.img_list = _this.dataObj.imageList&&_this.dataObj.imageList.length>0?_this.dataObj.imageList:[];
            _this.fj_list = _this.dataObj.fileList&&_this.dataObj.fileList.length>0?_this.dataObj.fileList:[];
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('查询失败');
        }
      }).catch(error => {
          _this.$terminal._error(error);
      });
    },
    checkNull(value){//检测是否为空
      if(value||value===0||value==='0'){
        return false;
      }else{
        return true;
      }
    },
    plusReady: function() {}
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  beforeRouteLeave(to, from, next) {
      localStorage.removeItem('rwzjxq_id');
      next();
  },
  mounted() {
    var _this = this;
    this.show_path = this.$global_msg.Url.hosts+'';
    this.id = localStorage.getItem("rwzjxq_id");
    //初始化
    this.init();
  },
  created() {}
};
</script>
<style scoped>
  #app3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;

    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .main {
    box-sizing: border-box;
    background: #f7f7f9;
    flex: 1;
    width: 100%;
    overflow: scroll;
    padding-bottom: 1rem;
  }

  /* 圆角 */
  .radius-b{
    border-radius: 0.222222rem;
  }
  .radius-m{
    border-radius: 0.166666rem;
  }
  .radius-s{
    border-radius: 0.111111rem;
  }

  .box{
    width: 100%;
    margin-top: 0.185185rem;
    background-color: #fff;
    padding-bottom: 0.185185rem;
  }

  .main-box {
    display: flex;
    justify-content: space-between;
    width: auto;
    margin: 0 0.185185rem;
    flex-direction: column;
    border-bottom: 1Px solid #ddd;
  }

  .main-box-in {
    width: auto;
    display: flex;
    padding: 0.462962rem 0;
    margin: 0 0.185185rem;
  }

  .main-box-in div{
    display: flex;
    align-items: center;
  }
  .main-box-in img{
    width: 0.666666rem;
    height: 0.666666rem;
    margin-right: 0.185185rem;
  }
  .dw{
    flex: 1;
    margin-right: 0.185185rem;
  }
  .date{
    width: 3rem;
    margin-right: 0.185185rem;
  }
  .man{
    width: 2.5rem;
  }



  .item{
    width: auto;
    margin: 0 0.185185rem;
    display: flex;
    padding-bottom: 0.092592rem;
  }
  .item-value{
    flex: 1;
    color: #909090;
  }

  ul,li{
    list-style: none;
  }
  .imgs_ul{
    margin-bottom: 0.185185rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .imgs_ul li{
    border-radius: 0.277778rem;
    overflow: hidden;
    margin-bottom: 0.185185rem;
  }
  .imgs_ul li img{
    width: 4.25rem;
    height: 2.5rem;
  }
  .fj{
    width: 100%;
    padding: 0.092592rem 0;
  }
</style>
